<template>
	<view class="bj">
		<!-- #ifdef MP-WEIXIN -->
		<view class="navbar">
			<uni-nav-bar :title="title" :left-icon="lefticon" :left-text="lefttext" :backgroundColor="backgroundColor"
				:border="false" fixed :color="color" statusBar @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<view class="two" :style="{ 'paddingBottom': menuTop.top + 44 +'px' }" v-if="menuTop"></view>
		<!-- #endif -->
		<!-- #ifdef APP || H5 -->
		<view class="navbar">
			<uni-nav-bar :title="title" :left-icon="lefticon" :left-text="lefttext" :backgroundColor="backgroundColor"
				:border="false" fixed :color="color" statusBar @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="bj-beijing"></view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			lefticon: String,
			lefttext: String,
			color: String,
			backgroundColor: {
				type: String,
				default: 'linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%)'
			}
		},
		data() {
			return {
				menuTop: uni.getMenuButtonBoundingClientRect(),
			};
		},
		methods: {
			clickLeft() {
				this.$emit('clickLeft')
			}
		}
	}
</script>

<style lang="scss">
	// #ifdef MP-WEIXIN
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		/* 确保导航栏在滚动时位于其他内容的上方 */
		background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 60%);

		/* 渐变背景 */
		::v-deep .uni-ellipsis-1 {
			font-size: 32rpx;
		}
	}

	// #endif
	// #ifdef APP || H5
	.navbar {
		background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%);

		/* 渐变背景 */
		::v-deep .uni-ellipsis-1 {
			font-size: 32rpx;
		}
	}

	// #endif
	.bj{
		position: relative;
	}
	.bj-beijing {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 300rpx;
		background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%);
	}
	
</style>